<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>私有组建的创建和使用</title>
	</head>
	<body>

		<div id="app">
			<login></login>
			<login></login>
			<login></login>
		</div>

		<template id="priComp1">
			<div>
				<button @click="counter">点击+1</button>
				<h3>{{count}}</h3>
			</div>
		</template>

		<script type="text/javascript">
			// 私有组件的定义

			var vm = new Vue({
				// 属性
				el: "#app",
				data: {
					comName: 'login-compon'
				},
				methods: {},
				filters: {},
				directives: {},
				components: { // 使用components属性定义实例内部私有组件
					login: {
						template: "#priComp1",
						// 组件可以有自己的data属性
						// 组件的data和实例的data不一样，必须是一个方法，还必须返回一个内部对象。
						// 这是为了让每一个使用组件的实例都有属于自己的数据，而不是数据共用
						data: () => {
							return {
								count: 0
							};
						},
						methods: {
							counter: function() { // 为什么不可以使用箭头符号：() => {}
								this.count++;
							}
						}
					}
				},

				// 生命周期函数
				beforeCreate() {},
				created() {},
				beforeMount() {},
				mounted: () => {},
				beforeUpdate: () => {},
				updated: function() {},
				beforeDestroy: () => {},
				destroyed() {}

			});
		</script>
	</body>
</html>
